<template>

  <van-tabs v-model:active="active" :before-change="beforeChange" @click="chuxian">
    <van-tab v-for="index in shuju" :title="index.title" :key="index" :ind="index">
      <div v-show="index.title==='购物车'" ref="container">
        <!--          <van-sticky :container="container" :offset-top="65">-->
        <div v-show="shoppingGroup!=null">
          <div class="list_one" v-show="shoppingGroup!=null">
            <div>
              <van-image
                  width="36px"
                  height="36px"
                  fit="cover"
                  :src="Rabbit"
              />
              <p style="font-weight: bold;font-size:24px">外卖<span style="font-size: 16px;color: #999999">送上门</span>
              </p>
            </div>
            <div class="shop">
              <p class="title" style="font-size: 12px;color: #999999; width: 150px">送至:北大青鸟三楼2306的四号床</p>
              <van-icon name="arrow" color="#999999"/>
            </div>
          </div>
<!--          1-->
          <div class="list">
            <div class="list_two" v-for="xiao in list" :key="xiao">
              <div>
                <van-checkbox v-model="checked1" checked-color="#ffd101">
                  <div class="shop">
                    <p class="title">{{ xiao.shop.shopName }}</p>
                    <van-icon name="arrow" color="#999999"/>
                  </div>
                  <div class="manJiang">
                    <van-tag color="#ffefeb" text-color="#fe3c00">满减</van-tag>
                    <span>25减3</span>
                    <span>45减5</span>
                  </div>
                </van-checkbox>
              </div>
              <div class="byy">
                <lazy-component>
                  <van-checkbox v-model="checked2" checked-color="#ffd101" v-for="one in list" :key="one">
                    <van-card
                        :price="xiao.dishes.price"
                        :desc="xiao.dishes.title"
                        :title="xiao.dishes.dishesName"
                        :thumb="xiao.dishes.dishesPhotoOrVideoUrl"
                        :origin-price="xiao.dishes.startingPrice"
                    />

                  </van-checkbox>
                </lazy-component>
              </div>
            </div>
          </div>
          <!--          </van-sticky>-->
          <van-sticky position="bottom">
            <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
              <van-checkbox v-model="checked1">全选</van-checkbox>
              <template #tip>
                <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="gold-coin">
                  <span>米袋虽空——樱花开哉！</span>
                  <van-tag round color="#ffe1e1" text-color="#ad0000">标签</van-tag>
                </van-notice-bar>
              </template>
            </van-submit-bar>
          </van-sticky>
        </div>
        <van-empty v-show="xian1" image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="快去选购吧"/>
      </div>

      <div v-show="index.title==='收藏'">
        <div class="gw_box" v-show="shoucang!=null">
          <div class="list_three">
            <div class="aaaa" v-for="tu in shoucang" :key="tu">
              <van-checkbox v-model="checked" checked-color="#ee0a24" v-show="shou"></van-checkbox>
              <van-card
                  :title="tu.dian"
                  :thumb="tu.url"
              >
                <template #tags>
                  <van-rate v-model="xin" :size="15" color="#ffd21e" readonly allow-half/>
                  <p><span>美团专送</span><span><van-icon name="location-o"/>1.9km</span></p>
                </template>
              </van-card>
            </div>
          </div>
        </div>
        <van-empty v-show="xian" image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="暂无收藏"/>
      </div>
    </van-tab>
  </van-tabs>
  <!--shdfjsdk-->
  <div class="middle-bottom">
    <van-tabs v-model:active="active1" animated offset-top="80px">
      <van-tab title="精选">
        <div class="xihaung">
          <van-card v-for="index2 in store" :key="index2"
                    :desc="index2.jiehsao"
                    :title="index2.name"
                    :thumb="index2.url"
                    class="hezi"

          >
            <template #tags style="margin-bottom: 0px">
              <van-tag plain type="danger">{{ index2.label1 }}</van-tag>
              <van-tag plain type="danger">{{ index2.label2 }}</van-tag>
              <van-tag plain type="danger">{{ index2.label3 }}</van-tag>
            </template>
          </van-card>
        </div>
      </van-tab>
      <van-tab title="送上门">内容 2</van-tab>
      <van-tab title="次日自提">内容 3</van-tab>
      <van-tab title="到店吃">内容 3</van-tab>
    </van-tabs>
  </div>
  <div v-show="shou">
    <van-sticky :offset-bottom="60" position="bottom">
      <van-button type="danger" block>删除</van-button>
    </van-sticky>
  </div>
</template>
<script>
import {ref} from 'vue';
import rabbit from "../assets/meituan.png";

export default {
  data() {
    return {
      list:[],
      store: [
        {
          name: '长沙大计',
          jiehsao: '5.0分|月售9999+',
          label1: '12减12',
          label2: '新人减1',
          label3: '0折起',
          url: require("../assets/pikaqiu.png")
        },
        {
          name: '北大青鸟',
          jiehsao: '5.0分|月售9999+',
          label1: '12减12',
          label2: '新人减1',
          label3: '0折起',
          url: require("../assets/xiaomei.png")
        },
        {
          name: '北大青鸟',
          jiehsao: '5.0分|月售9999+',
          label1: '12减12',
          label2: '新人减1',
          label3: '0折起',
          url: require("../assets/xiaomei.png")
        },
      ],
      Rabbit: rabbit,
      checked1: false,
      checked2: false,
      shou: false,
      xian: true,
      xian1: true,
      shoppingGroup: [
        {DianZi: "吃香喝辣", li: [{commodity: "大汉堡", url: require("../assets/pikaqiu.png")},{commodity: "nb mmns", url: require("../assets/pikaqiu.png")}]},
        {DianZi: "吃香lll喝辣", li: [{commodity: "nb mmns", url: require("../assets/pikaqiu.png")},{commodity: "nb mmns", url: require("../assets/pikaqiu.png")}]},
      ],
      shoucang: [
        {dian: '书亦烧仙草(诚兴园店)', url: require("../assets/xiaomei.png")},
        {dian: '书亦烧仙草(诚兴园店)', url: require("../assets/xiaomei.png")},
        {dian: '书亦烧仙草(诚兴园店)', url: require("../assets/xiaomei.png")},
      ]
    }
  },
  setup() {
    const container = ref(null);
    const xin = ref(5)
    const active = ref(0);
    const active1 = ref(0);
    const beforeChange = (index) => {
      // 返回 false 表示阻止此次切换
      if (index === 2) {
        return false;
      }

      // 返回 Promise 来执行异步逻辑
      return new Promise((resolve) => {
        // 在 resolve 函数中返回 true 或 false
        resolve(index !== 3);
      });
    };

    return {
      shuju: [
        {shu: "1", title: "购物车",},
        {shu: 2, title: "收藏",},
        {title: "管理",},
      ],
      beforeChange,
      active,
      active1,
      container,
      xin,
    };


  },


  methods: {
    getShoppingCart() {
      // let userId = this.$route.query.id;
      // console.log("userId=" + userId);
      this.$axios.get('/shopping-cart/shopping', {
        params: {
          userId:2
        }
      })
          .then(res => {

            // console.log("data=" + res)
            this.list = res.result.list;
            /*alert(res.list);*/
            // console.log("this.entity.dishesName="+this.entity.dishesName);
            console.log("this.list=" + res.list);
          }).catch(error => {
        console.log("error:" + error)
      })
    },
    chuxian(index) {
      if (index === 2) {
        if (this.shou === false) {
          this.shou = true;
        } else {
          this.shou = false;
        }
      }


    }
  },
  mounted() {
    this.getShoppingCart();
    if (this.shoucang == "") {
      this.xian=true;
    }else {
      this.xian=false;
    }
    if (this.shoppingGroup == "") {
      this.xian1=true;
    }else {
      this.xian1=false;
    }
  }
};
</script>
<style>
.van-tab {
  font-size: 18px;
  font-weight: bold;
}

.list {
  margin: 20px 10px 20px 10px;
  overflow: scroll;
  /*height: 580px;*/

}

.list_one {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px 10px 0px 10px;
}

.list_one div {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.list_three {
  display: flex;
  flex-direction: column;
}

.list_three .van-card__header {
  flex-direction: row;
}

.list_three .van-image__img {
  width: 80px;
  height: 80px;
  margin: 0;
}

.list_three .van-card__thumb {
  width: 80px;
  height: 80px;
}

.list_three .van-card {
  height: 105px;
  width: 100%;
}

.list_three .van-card__title {
  font-size: 18px;
  font-weight: bold;
  line-height: 18px;
  width: 200px;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

}

.title {
  width: 200px;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.shop {
  display: flex;
  align-items: center;
}

.manJiang span {
  font-size: 14px;
  margin-right: 5px;
}

.van-card {
  width: 345px;
  height: 165px;
}

.byy .van-card__header {
  flex-direction: row;
  margin-bottom: 0;
}

.byy .van-card__thumb {
  width: 150px;
}

.byy .van-image__img {
  width: 150px;
  margin: 0;
}

.hezi {
  width: 190px;
  height: 210px;
}

.xihaung {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.xihaung .van-image__img {
  margin-left: 4px;
}

.van-card:not(:first-child) {
  margin: 0;
}

.van-card__thumb {
  width: 180px;
  height: 150px;
}

.van-card__header {
  flex-direction: column;
  align-items: center;
}

.van-submit-bar {
  bottom: 49px;
}

element.style {
  top: 50px
}

.middle-bottom {
  margin-bottom: 160px;
}

.aaaa {
  display: flex;
  flex-direction: row;
}
</style>

